<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
			<button type="button">操作元素属性</button>
			<div id="box">
				div标签
			</div>
			<input type="password" name="" id="" value="" />
			
			<br>
			<br>
			
			<button type="button" id='bx'>操作自定义属性</button>
			<div id="div" hello="world">div存在自定义属性
			</div>
			
	</body>
	<script type="text/javascript" charset="utf-8">
			//操作元素属性
			
			//1.操作原生属性
			//获取元素
			var box=document.querySelector('div')
			var input=document.querySelector('input')
			var btn=document.querySelector('button')
			
			//操作属性
			btn.onclick=function(){
				box.id='content'
				input.type='checkbox'
			}
			
			//2.操作自定义属性
			//获取元素
			var button=document.querySelector('#bx')
			var bx=document.querySelector('#div')
			
			//获取自定义属性
			var res=bx.getAttribute('hello')
			
			//修改自定义属性
			button.onclick=function(){
				bx.setAttribute('hello','你好呀')//修改自定义属性
				//bx.removeAttribute('hello')删除自定义属性
			}
			
			
			
			
			
	</script>
</html>
